<template>
<div class="site-settings views-container">
  <div class="wlm-form">
    <div class="wlm-form-header">注册模板</div>
    <div class="wlm-form-notice warning"><i class="el-icon-bell"></i>默认选择阿里云短信平台</div>
    <div class="wlm-form-content">
      <el-form ref="registered" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
        <el-form-item label="短信签名" prop="registered.sign">
          <el-input v-model.trim="formFormatData.formData.registered.sign"></el-input>
          <div class="form-help">用于识别度的签名</div>
        </el-form-item>
        <el-form-item label="模板ID" prop="registered.template">
          <el-input v-model.trim="formFormatData.formData.registered.template">
          </el-input>
          <div class="form-help">短信服务商获取</div>
        </el-form-item>
        <el-form-item label="模板内容" prop="registered.content">
          <el-input type="textarea" :autosize="{ minRows: 4}" v-model.trim="formFormatData.formData.registered.content"></el-input>
        </el-form-item>
        <el-form-item label="模板变量" prop="registered.variable">
          <el-input v-model.trim="formFormatData.formData.registered.variable">
            <template slot="append">验证码</template>
          </el-input>
          <div class="form-help">可用变量：【验证码】</div>
        </el-form-item>
        <el-form-item label="测试号码" class="send">
          <el-input v-model.trim="formFormatData.otherData.registered.testNumber"></el-input>
          <el-button type="primary" :data-template="formFormatData.formData.registered.template" :data-mobile="formFormatData.otherData.registered.testNumber" v-countdown="{error:'请填写测试号码~!',send:'秒后重发','text':'获取验证码',api:'/countdown=register'}">发送</el-button>
          <div class="form-help">用于测试短信的号码</div>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <div class="wlm-form">
    <div class="wlm-form-header">找回密码</div>
    <div class="wlm-form-content ">
      <el-form ref="search" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
        <el-form-item label="短信签名" prop="search.sign">
          <el-input v-model.trim="formFormatData.formData.search.sign"></el-input>
          <div class="form-help">用于识别度的签名</div>
        </el-form-item>
        <el-form-item label="模板ID" prop="search.template">
          <el-input v-model.trim="formFormatData.formData.search.template">
          </el-input>
          <div class="form-help">短信服务商获取</div>
        </el-form-item>
        <el-form-item label="模板内容" prop="search.content">
          <el-input type="textarea" :autosize="{ minRows: 4}" v-model.trim="formFormatData.formData.search.content"></el-input>
        </el-form-item>
        <el-form-item label="模板变量" prop="search.variable">
          <el-input v-model.trim="formFormatData.formData.search.variable">
            <template slot="append">验证码</template>
          </el-input>
          <div class="form-help">可用变量：【验证码】</div>
        </el-form-item>
        <el-form-item label="测试号码" class="send">
          <el-input v-model.trim="formFormatData.otherData.search.testNumber"></el-input>
          <el-button type="primary" :data-template="formFormatData.formData.search.template" :data-mobile="formFormatData.otherData.search.testNumber" v-countdown="{error:'请填写测试号码~!',send:'秒后重发','text':'获取验证码',api:'/countdown=register'}">发送</el-button>
          <div class="form-help">用于测试短信的号码</div>
        </el-form-item>

        <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
          <el-button size="small"  @click="formFormatSubmit" type="primary">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</div>
</template>

<script>
import {
  setData,
  smsTemplate
} from '@/api/setting'
import countdown from '@/directive/countdown'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'SmsTemplate',
  components: {

  },
  directives: {
    countdown
  },
  data() {
    return {
      formFormatData: {
        key: ['registered', 'search'],
        api: {
          editForm: {
            api: setData,
            params: {
              always: true,
              key: 'smsTemplate'
            }
          },
          submitForm: smsTemplate
        },
        formData: {
          key: 'smsTemplate',
          registered: {
            sign: '',
            template: '',
            content: '',
            variable: ''
          },
          search: {
            sign: '',
            template: '',
            content: '',
            variable: ''
          }
        },
        otherData: {// 不需要提交的form数据
          registered: {
            testNumber: ''
          },
          search: {
            testNumber: ''
          }
        },
        rules: {
          registered: {
            sign: [
              {
                required: true,
                message: '请输入短信签名',
                trigger: 'blur'
              }
            ],
            template: [
              {
                required: true,
                message: '请输入模板ID',
                trigger: 'blur'
              }
            ],
            content: [
              {
                required: true,
                message: '请输入模板内容',
                trigger: 'blur'
              }
            ],
            variable: [
              {
                required: true,
                message: '请输入模板变量',
                trigger: 'blur'
              }
            ]
          },
          search: {
            sign: [
              {
                required: true,
                message: '请输入短信签名',
                trigger: 'blur'
              }
            ],
            template: [
              {
                required: true,
                message: '请输入模板ID',
                trigger: 'blur'
              }
            ],
            content: [
              {
                required: true,
                message: '请输入模板内容',
                trigger: 'blur'
              }
            ],
            variable: [
              {
                required: true,
                message: '请输入模板变量',
                trigger: 'blur'
              }
            ]
          }
        }
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.site-settings {}
</style>
